<!DOCTYPE html>
<html>
  <head>
    <script src="../dist/jspsych.js"></script>
    <script src="../dist/plugin-audio-button-response.js"></script>
    <script src="../dist/plugin-html-button-response.js"></script>
    <script src="../dist/plugin-preload.js"></script>
    <link rel="stylesheet" href="../dist/jspsych.css">
  </head>
  <body></body>
  <script>

  var jsPsych = initJsPsych({
    on_finish: function() {
      jsPsych.data.displayData();
    }
  });

  var timeline = [];

  timeline.push({
    type: jsPsychPreload,
    auto_preload: true
  });

  timeline.push({
    type: jsPsychHtmlButtonResponse,
    stimulus: '<div style="max-width:600px;"><p>Some browsers now require the user to interact with a page before it can play audio. '+
    'Clicking the button below counts as an interaction.</p><p>Be aware of this when planning audio experiments if '+
    'you want the first trial to include audio.</p></div>',
    choices: ['Continue']
  });

  timeline.push({
    type: jsPsychAudioButtonResponse,
    stimulus: 'sound/speech_green.mp3',
    choices: ['Green', 'Blue', 'Red'],
    prompt: "<p>What word was said?</p>"
  });

  timeline.push({
    type: jsPsychAudioButtonResponse,
    stimulus: 'sound/speech_red.mp3',
    choices: ['#00ff00', '#0000ff', '#ff0000'],
    response_allowed_while_playing: false,
    button_html: '<div style="background-color: %choice%; width:100px; height:100px;"></div>',
    prompt: "<p>Which color was said?</p>"
  });

  timeline.push({
    type: jsPsychAudioButtonResponse,
    stimulus: 'sound/speech_joke.mp3',
    choices: ['Not funny', 'Funny'],
    prompt: '<p>Is the joke funny?</p><p>When the audio stops, click a button to end the trial.</p><p>Response buttons are disabled while the audio is playing.</p>',
    response_allowed_while_playing: false
  })

  jsPsych.run(timeline); 

  </script>
</html>
